﻿/// <reference path="ext-all-debug-w-comments.js" />

Ext.Loader.setConfig({ enabled: true });

Ext.Loader.setPath('Ext.ux', '/Scripts');
Ext.Loader.setPath('Ext.ux.data', '/Scripts');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.PagingToolbar',
    'Ext.ModelMgr'
]);



Ext.onReady(function () {

    var dataStore = [
        [1, 'Alcoa Inc', 'info@alcao.com', '555-333-4544', false],
        [2, 'Altria Group Inc', 'info@agi.com', '555-999-4055', true],
        [3, 'American Express Company', 'support@aec.com', '435-453-4535', true],
        [4, 'American International Group', 'info@aig.com', '112-345-6327', false],
        [5, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [6, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [7, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [8, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [9, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [10, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [11, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [12, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [13, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [14, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [15, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [16, 'AT&T Inc.', 'support@att.com', '555-333-4155', true],
        [17, 'AT&T Inc.', 'support@att.com', '555-333-4155', true]
    ];

    Ext.regModel('Company', {
        fields: [
        { name: 'id', type: 'integer' },
        { name: 'name', type: 'string' },
        { name: 'phone', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'active', type: 'boolean' }
    ]
    });



    // create the Data Store
    var store = new Ext.data.Store({
        model: 'Company',
        remoteSort: true,
        pageSize: 10,
        proxy: {
            type: 'pagingmemory',
            data: dataStore,
            reader: {
                type: 'array'
            }
        }
    });


    var pluginExpanded = true;
    var grid = new Ext.grid.GridPanel({
        store: store,
        trackMouseOver: false,
        disableSelection: true,
        loadMask: true,
        viewConfig: {
            id: 'gv',
            trackOver: false
        },
        // grid columns
        headers: [
                    {
                        text: '',
                        width: 75,
                        sortable: true,
                        align: 'center',
                        renderer: function (val) { return '<a href="#wow">Edit</a>'; }
                    },
            {
                text: '<b>Id</b>',
                sortable: false,
                width: 25,
                align: 'center',
                dataIndex: 'Id'
            },
            {
                text: 'Company',
                width: 200,
                sortable: true,
                dataIndex: 'name'
            },
            {
                text: 'Phone',
                width: 120,
                sortable: true,
                dataIndex: 'phone'
            },
            {
                text: 'Email',
                width: 120,
                sortable: true,
                dataIndex: 'email'
            },
            {
                text: 'Active',
                width: 75,
                sortable: true,
                align: 'center',
                renderer: function (val) {
                    var result = val;
                    if (val) {
                        result = '<b>' + val + '</b>';
                    }
                    return result;
                },
                dataIndex: 'active'
            },
            {
                text: '',
                width: 75,
                sortable: true,
                align: 'center',
                renderer: function (val) { return '<a href="#wow">Brands</a>'; }
            },
            {
                text: '',
                width: 75,
                sortable: true,
                align: 'center',
                renderer: function (val) { return '<a href="#wow">Tickets</a>'; }
            },
            {
                text: '',
                width: 75,
                sortable: true,
                align: 'center',
                renderer: function (val) { return '<a href="mailto:support@sencha.com">Support</a>'; }
            }
        ],
        tbar: [
            {
                xtype: 'button',
                text: 'New..',
                tooltip: 'Create'
            },
            {
                xtype: 'button',
                text: 'Search',

                tooltip: 'Id or Name'
            },
            {
                 xtype: 'textfield',
                 name: 'searchField',
                 hideLabel: true,
                 tooltip: 'id',
                 width: 200
            }
        ],
        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
        renderTo: 'grid'
    });

    store.loadPage(1);

//    var viewport = new Ext.Viewport({
//        layout: 'fit',
//        resizible: true,
//        items: [grid]
//    });

});
